<template>
  <div class="capitalOverview">
    <div>
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row>
          <a-col :md="6">
            <a-form-item label="时间" class="wid100">
              <a-select placeholder="请选择" default-value="0">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="2">2022年</a-select-option>
                <a-select-option value="1">2021年</a-select-option>
                <a-select-option value="3">2020年</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6">
            <a-form-item label="企业主体" class="wid100">
              <a-select placeholder="请选择" default-value="0">
                <a-select-option value="0">企业主体</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row class="content">
      <a-col :span="24" class="tit">资金趋势</a-col>
      <a-col :span="6">
        <a-row class="card">
          <a-col :span="24" class="card_box back">
            <span class="text">当前余额</span>
            <span class="val">¥0.00</span>
          </a-col>
          <a-col :span="24" class="card_box back">
            <span class="text">支出</span>
            <span class="val">¥0.00</span>
          </a-col>
          <a-col :span="24" class="card_box">
            <span class="text">收入</span>
            <span class="val">¥0.00</span>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="18">
        <!-- <LineChartMultid :dataSource="dataSource1" :height="height" :title="title" :fields="fields"></LineChartMultid> -->
      </a-col>
    </a-row>
    <a-row class="content">
      <a-col :span="24" class="tit">
        <div class="title">分类占比</div>
        <a-radio-group v-model="value" @change="onChange">
          <a-radio :value="1"> 支出 </a-radio>
          <a-radio :value="2"> 收入 </a-radio>
        </a-radio-group>
      </a-col>
      <a-col :span="6">
        <a-row class="card" v-if="value == 1">
          <a-col :span="24" class="card_box back1">
            <span class="text">购买配额</span>
            <span class="val">¥0.00</span>
          </a-col>
          <a-col :span="24" class="card_box back2">
            <span class="text">购买CCER</span>
            <span class="val">¥0.00</span>
          </a-col>
          <a-col :span="24" class="card_box back3">
            <span class="text">降碳支出</span>
            <span class="val">¥0.00</span>
          </a-col>
        </a-row>
         <a-row class="card" v-else>
          <a-col :span="24" class="card_box back1">
            <span class="text">出售配额</span>
            <span class="val">¥0.00</span>
          </a-col>
          <a-col :span="24" class="card_box back2">
            <span class="text">降碳资金</span>
            <span class="val">¥0.00</span>
          </a-col>
      
        </a-row>
      </a-col>
      <a-col :span="18">
        <!-- <LineChartMultid :dataSource="dataSource1" :height="height" :title="title2" :fields="fields"></LineChartMultid> -->
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import LineChartMultid from '@/components/chart/LineChartMultid'
export default {
  components: {
    // LineChartMultid,
  },
  data() {
    return {
      value: 1,
      fields: ['单位:元'],
      title: '资金趋势',
        title2: '收入',
      height: 290,
      dataSource1: [
        { type: '一月', '': '' },
        { type: '二月', '': '' },
        { type: '三月', '单位:元': '' },
        { type: '四月', '单位:元': '' },
        { type: '五月', '单位:元': '' },
        { type: '六月', '单位:元': '' },
        { type: '七月', '单位:元': '' },
        { type: '八月', '单位:元': '' },
        { type: '九月', '单位:元': '' },
        { type: '十月', '单位:元': '' },
        { type: '十一月', '单位:元': '' },
        { type: '十二月', '单位:元': '' },
      ],
    }
  },
  methods: {
    onChange(e) {
      //   console.log('radio checked', e.target.value)
      if(e.target.value == 1){
           this.title2 = '收入'
      }else{
          this.title2 = '支出'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.capitalOverview {
  .wid100 {
    width: 90%;
    display: flex;
    flex-direction: row;
  }
  .ant-form-item-control-wrapper {
    width: 80% !important;
  }
  .content {
    margin-top: 20px;
    width: 100%;
    padding: 0 16px 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #eceded;
    border-radius: 10px;
    color: #2d303b;

    .tit {
      height: 48px;
      display: flex;
      flex-direction: row;
      align-items: center;
         font-size: 16px;
        font-weight: 600;
      .title {
        margin-right: 30px;
     
      }
    }
    .card {
      .text {
        margin: 14px 0;
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #2d303b;
      }
      .val {
        width: 100%;
        height: 32px;
        font-size: 28px;
        font-weight: 700;
        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .card_box {
        display: flex;
        flex-direction: column;
        margin-top: 12px;
        padding: 0 16px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-radius: 4px;
        height: 108px;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(225, 250, 252, 0.6)), to(#fff));
        background: linear-gradient(180deg, rgba(225, 250, 252, 0.6), #fff);
        border: 1px solid #f0f2f7;
      }
      .back {
        background: #f8fafc;
      }
      .back1{
          background: linear-gradient(180deg,rgba(225,250,252,.6),#fff);
      }
      .back2{
            background: linear-gradient(180deg,rgba(255,241,216,.6),#fff);
      }
      .back3{
          background: linear-gradient(180deg,rgba(255,231,250,.6),#fff);
      }
    }
  }
}
</style>